<template>
  <div class="about">
    <h1>This is an about page</h1>
    <ul>
      <li v-for="item in reslist" :key="item.id">{{ item.title }}</li>
    </ul>

    每页
    <select name="" id="" v-model="pagesize">
      <option v-for="(item, index) in pageSizes" :key="index" :value="item"
        >每页{{ item }}条</option
      >
    </select>

    <!-- 把每页多少条变成了一个下拉列表 -->

    条 共{{ list.length }}条
    <page
      :total="list.length"
      :pagesize="pagesize"
      @currentpage="changepage"
    ></page>
  </div>
</template>
<script>
import page from "../components/Paganation.vue";
export default {
  data() {
    return {
      list: [
        { id: 1, title: "jk制服", price: 100 },
        { id: 2, title: "dk制服", price: 5 },
        { id: 3, title: "斯普睡", price: 200 },
        { id: 4, title: "法国女仆装", price: 300 },
        { id: 5, title: "洛丽塔", price: 300 },
        { id: 6, title: "宋制汉服", price: 500 },
        { id: 7, title: "明制汉服", price: 600 },
        { id: 8, title: "腾飞木屐和服", price: 400 },
        { id: 9, title: "崔猛旗袍", price: 400 },
        { id: 10, title: "任世豪洛丽塔", price: 500 },
        { id: 11, title: "腾飞木屐和服", price: 400 },
        { id: 12, title: "崔猛旗袍", price: 400 },
        { id: 13, title: "任世豪洛丽塔", price: 500 },
      ],
      pagesize: 3,
      pagenum: 1,
      pageSizes: [3, 5, 6, 10],
    };
  },
  components: {
    page,
  },
  methods: {
    changepage(i) {
      console.log(i);
      this.pagenum = i;
    },
  },
  computed: {
    reslist() {
      return this.list.slice(
        (this.pagenum - 1) * this.pagesize,
        this.pagenum * this.pagesize
      );
    },
  },
};
</script>
